<template>
  <div>
      <el-form-item>
      <el-button type="danger" :icon="Plus" @click="onSubmit()">新增</el-button>
      <el-button type="danger" @click="">保存</el-button>
      <el-button type="danger" @click="">撤销</el-button>
      <el-button type="danger" :icon="Delete" @click="">删除</el-button>
    </el-form-item>
  <!-- <br> -->
  <hr style="height:3px; background-color:indianred">
  <!-- 后裔转种信息表头 -->
  <!-- style="height:580px" -->
  <div>
      <table class="bordered-table" width="100%" style="background-color:antiquewhite">
      <tr height="40">
          <td width="150">耳号</td>
          <td width="150">单据号</td>
          <td width="150">栋舍</td>
          <td width="150">阶段</td>
          <td width="150">栏位</td>
          <td width="150">只数</td>
          <td width="150">重量(公斤)</td>

      </tr>
      </table>
  </div>
  <!-- 断奶信息添加 -->
  <table class="bordered-table" width="100%" v-if="rowNum">
      <tr>
          <td width="150">
              <el-input v-model="form.pigear"></el-input>
          </td>

          <td width="150">
              <el-input v-model="form.pigNo" :disabled="true"></el-input>
          </td>

          <td width="150">
              <el-input v-model="form.bedroomId"></el-input>
          </td>
          <td width="150">
              <el-input v-model="form.pigClass"></el-input>
          </td>
          <td width="150">
              <el-input v-model="form.pigLanw"></el-input>
          </td>
          <td width="150">
              <el-input v-model="form.pigNum" :disabled="true"></el-input>
          </td>
          <td width="150">
              <el-input v-model="form.pigweight"></el-input>
          </td>

      </tr>
  </table>
  <el-button type="danger" link :icon="Plus" @click="AddRow(true)">增行</el-button>
  <el-button type="danger" link  @click="delRow(false)">—减行</el-button>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive,ref} from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { Plus, Delete } from "@element-plus/icons-vue";

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

const router = useRouter();

const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hour = date.getHours();
const minute = date.getMinutes();

const random = Math.floor(Math.random() * 1000);
const pigNo = year + '' + month + '' + day + '' + hour + '' + minute + '' + '' + random;
const form = reactive({
  "pigNo":pigNo,
  pigear:'',
  bedroomId:'',
  pigClass:'',
  pigweight:'',
  pigLanw:'',
  pigNum:'1',

  createdOwner:localStorage.getItem('userName')
})
//期初
const onSubmit = () => {
  axios.post(apiUrl+'/api/Pig/addPigBabys',form)
      .then(res => {
          if (res.data.code == 0) {
              console.log("期初添加", res.data);
              ElMessage.success('期初信息添加成功');
               router.push('/ShowPig');
              delRow();
          }
          else {
              ElMessage.error('期初信息添加失败');
              return;
          }
      })
}



//新增行
const rowNum = ref(false);
const AddRow = () => {
rowNum.value = true;
};

//减行
const delRow = () => {
rowNum.value = false;
};
</script>

<style scoped>
.bordered-table {
border-collapse: collapse; /* 合并相邻单元格的边框 */
width: 100%;
}

.bordered-table th,
.bordered-table td {
border: 1px solid rgb(41, 41, 41); /* 为表头和表格单元格添加边框 */
padding: 8px; /* 可选，为单元格内容添加内边距 */
text-align: center; /* 可选，设置单元格内容的对齐方式 */
}

.bordered-table tr:first-child th {
border-bottom: 2px solid black; /* 可选，为表头添加更粗的底部边框 */
}
</style>
